
import { Tag, Divider,Button } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import orderList from '../func/order_list';
import DeviceForm from './deviceform/deviceform';

const TableList: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [deviceModalVisible, handleDeviceModalVisible] = useState<boolean>(false);
  const [orderkey, setorderkey] = useState<string>();
  
  const columns: ProColumns<any>[] = [
    {
      title: "订单号",
      dataIndex: 'order_id',
      valueType: 'text',
    },
    {
      title: "id",
      dataIndex: 'id',
      valueType: 'text',
      hideInForm:true,
      hideInSearch:true,
      hideInTable:true
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setorderkey(record.id);
              handleDeviceModalVisible(true);
            }}
          >
          订单详情
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<any>
        headerTitle={"查询最新版本"}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={(params, sorter, filter) => orderList({ ...params, sorter, filter })}
        columns={columns}
      />
      <DeviceForm
        onCancel={() => {
          handleDeviceModalVisible(false);
        }}
        ModalVisible={deviceModalVisible}
        orderkey={orderkey}
      />
    </PageContainer>
  );
};

export default TableList;
